<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>欢迎来到京东商城</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2976530_gvawtjfl6g.css">
    <link rel="stylesheet" href="./css/sw.css">
    <link rel="icon" href="img/京东-01.png">
    
    <style>
        html,
        body {
            position: relative;
            height: 100%;
            background-color: #c6e6e8;
        }

        body {
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper {
            width: 60%;
            height: 552px;
            float: left;
            margin-left: 60px;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #eee;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 700px;
            height: 480px;
            object-fit: cover;
        }

        .swiper-pagination-bullet {
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            color: #000;
            opacity: 1;
            background: rgba(0, 0, 0, 0.2);
        }

        .swiper-pagination-bullet-active {
            color: #fff;
            background: #007aff;
        }
        .wh{
            background-color: pink;
            border-bottom: 1px solid;
        }
    </style>
</head>

<body>
    <div class="top">
        <span style="cursor: pointer;">京东</span>
        <ul>
            <li class="login">
                <a href="登录.html">登录</a>
            </li>
            <li class="register">
                <a href="注册.html">注册</a>
            </li>
            <li>
                <a href="我的订单.html">我的订单</a>
            </li>
            <li>
                <a href="我的京东.html">我的京东</a>
            </li>
            <li>
                <a href="list.html">商品列表</a>
            </li>
        </ul>
    </div>
    <div class="daohan">
        <div>
            <input type="text" placeholder="请输入你想搜索的关键字">
            <i class="iconfont icon-sousuo2"></i>
        </div>
    </div>
    <div class="bann">
        <div class="dt">全部商品分类</div>
       <ul>

       </ul>
       
    </div>
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="https://img0.baidu.com/it/u=2768937572,1980489942&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=292" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="https://img0.baidu.com/it/u=2221532994,2748641024&fm=253&fmt=auto&app=138&f=BMP?w=499&h=348" alt="">
                </div>
                <div class="swiper-slide"><img src="https://img1.baidu.com/it/u=4188347726,1186341621&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" alt=""></div>
                <div class="swiper-slide">
                    <img src="https://img1.baidu.com/it/u=2712403279,2105755999&fm=253&fmt=auto&app=138&f=JPEG?w=720&h=480" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="https://img0.baidu.com/it/u=1970523802,2106504643&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=446" alt="">
                </div>
                <div class="swiper-slide"><img src="https://img0.baidu.com/it/u=8701260,3378309875&fm=253&fmt=auto&app=120&f=JPEG?w=850&h=566" alt=""></div>
                <div class="swiper-slide">
                    <img src="http://t13.baidu.com/it/u=1201765863,1855871211&fm=224&app=112&f=JPEG?w=500&h=500&s=5D17FEB65AB7B3E914129DB703003009" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="http://t14.baidu.com/it/u=3020134020,1525210&fm=224&app=112&f=JPEG?w=500&h=500" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="https://img1.baidu.com/it/u=1220935510,39536716&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="bann2">
               <div class="bant">
                 <p>欢迎来到京东</p>
               </div>
               <div class="bacent">
                    <p style="display: inline-block;font-size: 20px;font-weight: 800;margin-bottom: 10px;">今日推荐</p>
                    <a href="" style="margin-left: 70px;" class="bacenta">更多></a>
                    <span style="display: inline-block;padding: 4px;background-color: pink;color: deeppink;margin-bottom: 10px;">热搜</span><a href="" style="margin-left: 12px;">去屑实力派当然海飞...</a>
                    <span style="display: inline-block;padding: 4px;background-color: pink;color: deeppink;margin-bottom: 10px;">热搜</span><a href="" style="margin-left: 12px;">控油不刺激当选海蓝...</a>
                    <span style="display: inline-block;padding: 4px;background-color: pink;color: deeppink;margin-bottom: 10px;">热搜</span><a href="" style="margin-left: 12px;">海的味道我知道波力...</a>
                    <span style="display: inline-block;padding: 4px;background-color: pink;color: deeppink;margin-bottom: 10px;">热搜</span><a href="" style="margin-left: 12px;">厨房好帮手吸油烟机...</a>
                    <span style="display: inline-block;padding: 4px;background-color: pink;color: deeppink;margin-bottom: 10px;">热搜</span><a href="" style="margin-left: 12px;">一节更比六节强南孚...</a>
               </div>
               <div class="banbott">
                    <div class="battop">
                        <span>友情链接</span>
                        <a href="http://s.click.taobao.com/t?spm=a231o.13503973.19985674831.1&e=m%3D2%26s%3DFl0vJlnGe5UcQipKwQzePCperVdZeJviK7Vc7tFgwiFRAdhuF14FMazBupaR3CCG08qJM1kPvQriCpeCUkeJc8tA8Qks8BYBXdZXtfxfyx18isIqg9litAZn%2By0keumoEC8RQAClYWM0VQjy9y0sgCGFCzYOOqAQ&pid=mm_0_0_0">
                            <img src="https://img.alicdn.com/tfs/TB1wK0biNv1gK0jSZFFXXb0sXXa-228-126.gif" alt="">
                        </a>
                       <a href="https://s.click.taobao.com/t?spm=a231o.13503973.19985674833.1&union_lens=lensId%3AOPT%401612256136%400b1a25e7_ad17_17761f44e98_79f8%4001%3BeventPageId%3A20150318020003696&e=m%3D2%26s%3DqvcPvKpqWgQcQipKwQzePCperVdZeJviPI5Rhak06vatZmRqFOmrPjtQI2ptbj8xMDu9fLXmIlmiB9z1SEcjSW%2F4cJGVB8O23dPr9tqBe91EtQN0aRNMFQz8VqANvwwT6zGLzGsVVSpEiFenDNcIzk9%2FYFgWEAd0SDsCym4%2BXYF%2BPGXoAieI2mY9hpAAaXcfJY3ISjGZklSSdgXhQ%2BavP9jHk6Ajv4fplzKq68Bj%2Byht13y7RnE5%2FM2jrT2jN9cyaWHun%2FdHq1BP1ply%2Ft95%2F1LhvsiknOOtyLaDP8WIAryH7KeLwQR0PrKSOGd3QcHiE9jysaCX1rw1qu%2BfA3d8iapZ7H3IF6kUxiXvDf8DaRs%3D&pid=mm_0_0_0">
                           <img src="https://img.alicdn.com/tfs/TB19mNXiO_1gK0jSZFqXXcpaXXa-228-126.gif" alt="">
                       </a>
                       <a href="">
                           <img src="https://img.alicdn.com/tfs/TB1HqQ.iEH1gK0jSZSyXXXtlpXa-228-126.gif" alt="">
                       </a>
                    </div>
               </div>
        </div>
    <div class="dibu">
            <p>周帅帅集团能力有限公司</p>
            <p>周帅帅著</p>
            <p>京ICP备12003911号-6 &nbsp Copyright &copy2013-2019</p>
     </div>
</body>
<script src="./js/sw.js"></script>
<script src="./js/jquery-3.6.0.js"></script>
<script src="utils.js"></script>
<script src="./js/layer/dist/layer.js"></script>
<script src="indexx.js"></script>
<script>


    var swiper = new Swiper(".mySwiper", {
        loop : true,
        autoplay: {
    delay: 1000,
    stopOnLastSlide: false,
    disableOnInteraction: true,
    },
    autoplay: {
    disableOnInteraction: false,
  },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
            renderBullet: function (index, className) {
                return '<span class="' + className + '">' + (index + 1) + "</span>";
            },
        },
        
    });

    var span = document.querySelector('.top span')
    span.onclick = function(){
        location.href = '首页.html'
    }

    function getCookie(key) {
        var cookie = document.cookie;
        var arr = cookie.split('; ')
        for (var i = 0; i < arr.length; i++) {
            var brr = arr[i].split('=')
            if (brr[0] === key) {
                return brr[1]
            }
        }
    }
    var username = getCookie('username')
    console.log(username);

    // var sex = getCookie('sex')
    // console.log(sex);

    function setCookie(key, value, seconds) {
        var date = new Date()
        date.setTime(date.getTime() + seconds * 1000 - 8 * 3600 * 1000)
        document.cookie = key + '=' + value + ';expires=' + date
    }
    // 将cookie中的用户名显示在页面上
    if (username) {
        // 显示在页面上
        var loginLi = document.querySelector('.login');
        loginLi.innerHTML = `
    <a href="">欢迎尊贵的${username}</a>
    `

        var registerLi = document.querySelector('.register');
        registerLi.innerHTML = `
        <a href="javascript:;" class="logout">登出</a>
    `

        // 登出
        document.querySelector('.logout').onclick = function () {
            loginLi.innerHTML = `
            <a href="登录.html">登录</a>
        `
            registerLi.innerHTML = `
            <a href="注册.html">注册</a>
        `

            // 删除cookie - 重新设置cookie - 将失效的时间日期对象设置在上一秒
            setCookie('username', null, -1)
        }
    }
</script>

</html>